<template>
  <div class="userNoteBox" v-if="userNote.notes.length > 0">
    <div class="straight_days">
      已连续打卡 <strong>{{ userNote.straight_days }}</strong> 天
    </div>
    <div class="userNotes">
      <UserNoteItem
        v-for="(item, index) in userNote.notes"
        :key="index"
        :item="item"
      />
    </div>
  </div>
  <div class="userNoteBox" v-else>
    <div class="none">他还没有发布过笔记</div>
  </div>
</template>

<script setup lang="ts">
import UserNoteItem from "@/components/UserNoteItem.vue";
import { useDouguoStore } from "@/stores/douguo";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useRouter } from "vue-router";

const douguo = useDouguoStore();

const { userNote } = storeToRefs(douguo);

const { updataUserNote } = douguo;

const route: object = useRouter();

const obj1 = ref({
  id: route.currentRoute.value.query.id,
  offset: 0,
  limit: 20,
});

updataUserNote(obj1);
</script>

<style lang="scss" scoped>
.userNoteBox {
  padding: 0 15px;

  .straight_days {
    margin-bottom: 10px;
    color: #999;

    strong {
      color: #000;
    }
  }

  .none {
    color: #999;
    font-size: 16px;
    margin-top: 20px;
    text-align: center;
  }
}
</style>
